<template>
  <div class="app-container">
    <el-form ref="formSearch" :model="searchForm" label-width="100px">
      <el-row>
        <el-col :span="19">
          <el-row class="form_table">
            <el-col :span="6">
              <el-form-item :label="$t('process.name')" prop="name">
                <el-input v-model="searchForm.name" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item :label="$t('process.key')" prop="key">
                <el-input v-model="searchForm.key" clearable />
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="5" style="text-align: center">
          <el-button
            type="primary"
            @click="
              searchForm.pageNumber = 1
              getData()
            "
          >{{ $t('btn.query') }}</el-button>
          <el-button type="danger" @click="resetForm('formSearch')">{{ $t('btn.reset') }}</el-button>
        </el-col>
      </el-row>
    </el-form>
    <delete-btn v-permission="'gaeaUserController#deleteById'" :disabled="selectedList.length < 1" @handleDelete="handleDelete" />
    <el-button type="primary" :disabled="selectedList.length < 1" @click="startProcess">{{ $t('process.start') }}</el-button>
    <el-table stripe :data="tableList" border @selection-change="handleSelectionChange">
      <el-table-column fixed type="selection" width="50" center />
      <el-table-column prop="id" :label="$t('process.id')" min-width="140" align="center" />
      <el-table-column prop="name" :label="$t('process.name')" min-width="110" align="center" />
      <el-table-column prop="key" :label="$t('process.key')" min-width="90" align="center" />
      <el-table-column prop="description" :label="$t('processModel.modelDesc')" min-width="110" align="center" />
      <el-table-column prop="version" :label="$t('process.version')" min-width="40" align="center" />
      <el-table-column prop="deploymentId" :label="$t('process.deployId')" align="center" min-width="140" />
    </el-table>
    <el-pagination v-show="total > 0" background :current-page.sync="searchForm.pageNumber" :page-sizes="$pageSizeAll" :page-size="searchForm.pageSize" layout="total, prev, pager, next, jumper, sizes" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    <Designer v-if="isDesignerPopup" ref="designer" />
    <IForm ref="iform" />
  </div>
</template>
<script>
import { processPageList, addProcess, deleteProcess, startProcess } from '@/api/flowable'
import Designer from '@/components/Flowable/Designer'
import IForm from '@/components/Flowable/IForm'
export default {
  name: 'Model',
  components: { Designer, IForm },
  data() {
    return {
      isDesignerPopup: false,
      id: '',
      treeDialog: false,
      selectedList: [],
      searchForm: {
        name: null,
        modelKey: null,
        pageNumber: 1,
        pageSize: 10,
      },
      tableList: [],
      total: 0,
      dialogTittle: 'view',
      basicDialog: false,
      dialogForm: {
        username: null,
        days: null,
        reason: null,
      },
      formRules: {
        username: [{ required: true, message: this.$t('placeholder.input'), trigger: 'blur' }],
        days: [{ required: true, message: this.$t('placeholder.input'), trigger: 'blur' }],
      },
    }
  },
  created() {
    this.getData()
  },
  methods: {
    designModel() {
      const row = this.selectedList[0]
      this.design(row.id)
    },
    startProcess() {
      const row = this.selectedList[0]
      this.$nextTick(() => {
        this.$refs.iform.init(row)
      })
    },
    // deployModel() {
    //   const row = this.selectedList[0]
    //   deployProcessModel(row.id)
    // },
    design(id) {
      this.isDesignerPopup = true
      this.$nextTick(() => {
        this.$refs.designer.init(process.env.VUE_APP_BASE_API + `/flowable/index.html#/editor/${id}`, '流程设计')
      })
    },
    // 重置密码
    // async resetPsw() {
    //   const { code } = await resetPwd({ username: this.selectedList[0].username })
    //   if (code != '200') return
    // },
    // 分配角色
    setRole() {
      this.id = this.selectedList[0].username
      this.treeDialog = true
    },
    // 提交按钮
    confirm() {
      this.$refs.processForm.validate(async(valid, obj) => {
        if (valid) {
          const row = this.selectedList[0]
          const { code } = await startProcess(row.key, this.dialogForm)
          this.closeDialog(true)
        }
      })
    },
    // 关闭弹窗
    closeDialog(bool) {
      this.$refs['processForm'].resetFields()
      this.basicDialog = false
    },
    // 删除操作
    async handleDelete() {
      const ids = this.selectedList.map((item) => item.id)
      const { code } = await deleteProcess(ids)
      // const { code } = await deleteUser(this.selectedList[0].id) // 暂时保留单删接口
      if (code != '200') return
      this.getData()
    },
    // 重置
    resetForm(formName) {
      this.$refs[formName].resetFields()
      this.tableList = []
      this.total = 0
      this.getData()
    },
    // 查询
    async getData() {
      const { data, code } = await processPageList(this.searchForm)
      if (code != '200') return
      this.tableList = data.records
      this.total = data.total
    },
    // 选择项改变时
    handleSelectionChange(val) {
      this.selectedList = val
    },
    // 页码改变
    handleCurrentChange(pageNumber) {
      this.searchForm.pageNumber = pageNumber
      this.getData()
    },
    // 每页size改变时
    handleSizeChange(val) {
      this.searchForm.pageNumber = 1
      this.searchForm.pageSize = val
      this.getData()
    },
  },
}
</script>
